<template>
  <Modal v-model="visible" title="抖音授权" :width="500">
    <div style="background: #e7f8fe; margin: 10px; display: flex; padding: 10px">
      <Icon type="ios-information-circle-outline" :size="20" color="#3591F0" />
      <p style="font-size: 13px; color: #000; margin-left: 5px">
        绑定人员后，点击下方
        <span style="font-weight: 600">「扫码授权」</span>
        按钮，案场人员可使用
        <span style="font-weight: 600">「抖音APP」</span>
        扫描页面上的二维码进行授权。
        <a style="color: #2d8cf0" @click="onTip">查看抖音扫一扫功能入口 ></a>
      </p>
    </div>
    <div style="display: flex; justify-content: space-between; padding: 50px">
      <div style="flex: 1"></div>
      <div>
        <dt-info ref="infoRef" :options="options" :info="info" :key="key"></dt-info>
      </div>
      <div style="flex: 4"></div>
    </div>
    <div slot="footer">
      <Button @click="hide">取消</Button>
      <Button type="primary" @click="onOk">扫码授权</Button>
    </div>

    <Modal v-model="tipVisible" title="扫一扫功能入口" :width="300" footer-hide>
      <img src="./tip1.png" style="width: 237px; height: 77px" />
      <img src="./tip2.png" style="width: 200px; height: 77px; margin-top: 29px" />
    </Modal>
  </Modal>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  import nameOpt from '@/biz/option/name.js'
  import mgr from '../biz/authTT'
  import dt from '@dt/dt'
  const [visible, tipVisible] = [ref(), ref()]
  const infoRef = ref()
  const key = ref(0)
  const info = reactive({ userId: null })
  const options = [
    nameOpt.createPeople({
      key: 'userId',
      validate: 1,
      title: '绑定人员',
      to: (res) => ({
        userId: String(res.userId)
      })
    })
  ]

  function hide() {
    visible.value = false
  }

  function onOk() {
    infoRef.value.validate().then((res) => {
      if (res) {
        mgr.authed(info.userId).then((res) => {
          if (res) {
            dt.ui.Message.warning('该人员已绑定抖音')
          } else {
            let id = `awljemxdr9zy1ikw`
            let uri = dt.env.h5Url + '/market'
            let scope = 'video.list.bind,video.data.bind,data.external.user,user_info'
            let state = 'tt_auth_' + info.userId
            let url = `https://open.douyin.com/platform/oauth/connect?client_key=${id}&response_type=code&scope=${scope}&redirect_uri=${uri}&state=${state}`
            window.open(url)
            info.userId = null
            hide()
          }
        })
      }
    })
  }

  function onTip() {
    tipVisible.value = true
  }

  defineExpose({
    show() {
      key.value++
      visible.value = true
    }
  })
</script>
